<template>
  <div
    v-loading="isLoading"
    class="panel-property"
  >
    <div class="content">
      <PanelLabelOverflowTooltip
        ref="panelLabelOverflowTooltip"
        :component-style="form.componentStyle"
      />
      <el-form
        ref="form"
        v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
        class="prop-form"
        label-position="right"
        :model="form"
        :rules="rules"
        label-width="30%"
      >
        <BaseOption
          :form="form"
          option="unit"
        />
        <VsFormItem label="Tooltip">
          <BaseOption
            :form="form"
            option="tooltip"
            :widget-instance-id="widgetInstanceId"
            :config="config"
          />
        </VsFormItem>
        <VsFormItem
          :label="$demoi18n('panel.label.showSelectedStatus')"
          label-width="110px"
        >
          <el-switch v-model="form.selectedStatus"></el-switch>
        </VsFormItem>
        <!-- 阈值区间 -->
        <VsFormItem :label="$demoi18n('word.threshold')">
          <el-button
            type="primary"
            class="btn-sure"
            size="default"
            @click="openThreshod"
          >
            {{ $demoi18n('btn.thresholdSetting') }}
          </el-button>
        </VsFormItem>
        <VsFormItem
          :label="$demoi18n('word.icon')"
          prop="hasIcon"
        >
          <el-radio-group
            v-model="form.hasIcon"
            size="default"
            :fill="activeColorRadio"
            style="width:90%;"
          >
            <el-radio label="withIcon">{{ $demoi18n('panel.option.withIcon') }}</el-radio>
            <el-radio label="withoutIcon">{{ $demoi18n('panel.option.withoutIcon') }}</el-radio>
          </el-radio-group>
        </VsFormItem>
        <VsFormItem
          v-if="form.hasIcon === 'withIcon'"
          ref="iconSmall"
          :label="$demoi18n('panel.label.uploadIcon')"
          class="logo_form_item"
          prop="iconSmall"
        >
          <IconEditor
            :icon="form.icon"
            :component-style="form.componentStyle"
            :rooter-width="50"
            @save="saveIcon($event, form)"
            @delete="deleteIcon($event, form)"
          />
        </VsFormItem>
        <BaseOption
          :form="form"
          option="textComposition"
        />
        <BaseOption
          :form="form"
          option="componentStyle"
          @change="componentStyleChanged"
        />
        <OptionCollapse>
          <el-collapse-item
            :title="$demoi18n('echart.setting.component')"
            name="cssStyle.grid"
          >
            <VsFormItem :label="$demoi18n('vs-button.buttonAlignment')">
              <el-select
                v-model="form.justify"
                size="default"
              >
                <el-option
                  :label="$demoi18n('option.align.left')"
                  value="flex-start"
                ></el-option>
                <el-option
                  :label="$demoi18n('option.align.center')"
                  value="center"
                ></el-option>
                <el-option
                  :label="$demoi18n('option.align.right')"
                  value="flex-end"
                ></el-option>
              </el-select>
            </VsFormItem>
            <BaseOption
              :form="form"
              option="cssStyle.grid"
              :df-css-style-attrs="dfCssStyleAttrs.grid"
            />
            <VsFormItem
              :label="$demoi18n('word.background')"
              class="base-option"
            >
              <ColorPicker v-model:value="form.backgroundColor" />
            </VsFormItem>
          </el-collapse-item>
          <el-collapse-item
            :title="$demoi18n('word.name')"
            name="cssStyle.name"
          >
            <BaseOption
              :form="form"
              option="title"
              :label="$demoi18n('panel.label.name')"
            />
            <BaseOption
              :form="form"
              option="cssStyle.name"
              :df-css-style-attrs="dfCssStyleAttrs.name"
            />
          </el-collapse-item>
          <el-collapse-item
            :title="$demoi18n('word.numValue')"
            name="cssStyle.value"
          >
            <BaseOption
              :form="form"
              option="cssStyle.value"
              :df-css-style-attrs="dfCssStyleAttrs.value"
            />
          </el-collapse-item>
          <el-collapse-item
            :title="$demoi18n('word.unit')"
            name="cssStyle.unit"
          >
            <BaseOption
              :form="form"
              option="cssStyle.unit"
              :df-css-style-attrs="dfCssStyleAttrs.unit"
            />
          </el-collapse-item>
          <BaseOption
            :form="form"
            option="noDataPromptSetting"
          />
        </OptionCollapse>
        <AdvanceSet :form="form"></AdvanceSet>
      </el-form>
    </div>
    <ThresholdSetting
      ref="thresholdSetting"
      :form="form"
      :is-icon="config.config.property.hasIcon"
      :config="config"
      :upload-img-list="uploadImgList"
      :active-color-switch="activeColorSwitch"
      :active-color-radio="activeColorRadio"
      :name-list="nameList"
      @save="handleThresholdSave"
    />
    <PanelPropertyBottom :config="config" :widgetInstanceId="widgetInstanceId" :form="form" />
  </div>
</template>
<script>
import BaseOption from '@/components/common/base-option/base-option.vue';
import OptionCollapse from '@/components/common/base-option/option-collapse/option-collapse.vue';
import ColorPicker from '@/components/common/color-picker/color-picker.vue';
import IconEditor from '@/components/common/icon/icon-editor.vue';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import Range from '@/components/common/range/range.vue';
import ThresholdSetting from '@/components/common/threshold-setting/threshold-setting';
import EventBus from '@/event-bus/EventBus.js';
import imgUploadBase from '@/mixin/img-upload-base.js';
import panelPropertyBase from '@/mixin/panel-property-base.js';
import { numFormat } from '@/utils/util';
import AdvanceSet from '../../common/advance-setting/advance-setting.vue';
import colorGroup from './colorGroup.js';
import dfCssStyleAttrs from './cssStyle-default.js';

export default {
  name: 'PanelProperty',
  components: {
    Range,
    ThresholdSetting,
    BaseOption,
    ColorPicker,
    OptionCollapse,
    IconEditor,
    PanelLabelOverflowTooltip,
    AdvanceSet,
  },
  mixins: [imgUploadBase, panelPropertyBase],
  props: ['config', 'widgetInstanceId', 'widget'],
  data() {
    return {
      activeColorRadio: '#2D8CF0', // 单选框选中时的颜色
      colorGroup: colorGroup,
      isLoading: false,
      form: {},
      activeLabel: null,
      dfCssStyleAttrs: {},
      nameList: [],
    };
  },
  watch: {},
  created() {
    // 读取配置
    if (this.config) {
      this.form = JSON.parse(JSON.stringify(this.config.config.property));
    }
    this.initDfCssStyleAttrs();
    EventBus.$on(`apiDataChanged_${this.widgetInstanceId}`, this.apiDataChanged);
  },
  methods: {
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    handleThresholdSave(thresholdForm) {
      const { isThreshold, thresholdData, thresholdDataType } = thresholdForm;
      this.form = {
        ...this.form,
        isThreshold,
        threshold: thresholdData,
        thresholdDataType,
      };
    },
    openThreshod() {
      if (this.$refs.thresholdSetting) {
        this.$refs.thresholdSetting.openDialog();
      }
    },
    componentStyleChanged(val) {
      const keys = Object.keys(this.colorGroup[val]);
      this.form.color = keys[0];
      this.form.backgroundColor = this.getValByCompStl('#fff', '#0D263A', '#232323');
    },

    // 默认css样式，兼用旧版本
    initDfCssStyleAttrs() {
      this.dfCssStyleAttrs = dfCssStyleAttrs;
    },
    apiDataChanged(apiData) {
      if (!apiData) {
        this.nameList = [];
      } else {
        const arr = apiData.map(n => {
          if (n.value) {
            n.value = numFormat(n.value, true);
            n.value = n.value.toString();
          }
          return n.value;
        });
        this.nameList = Array.from(new Set(arr));
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import '../../common/less/panel-property.less';
</style>
<style lang="less" scoped>
.panel-property {
  .content {
    .prop-form {
      padding: 0 10px;

      .slider-number {
        vertical-align: text-bottom;
        padding-right: 5px;
      }

      .slider-number-left {
        vertical-align: text-bottom;
        padding-right: 15px;
      }
      .slider-number-right {
        vertical-align: text-bottom;
        padding-left: 15px;
      }
      :deep(.el-slider) {
        display: inline-block;
        width: 100px;
      }

      .icon {
        line-height: 40px;
        :deep(.el-icon-picture) {
          font-size: 20px;
        }
        :deep(.Delete) {
          font-size: 20px;
        }
      }

      :deep(.el-form-item) {
        margin-bottom: 0;
      }
      .input-number {
        width: 80px;
        :deep(.el-input-number__decrease) {
          width: 19px;
          background-color: #fff;
        }
        :deep(.el-input-number__increase) {
          width: 19px;
          background-color: #fff;
        }
        :deep(.el-input__inner) {
          padding-left: 19px;
          padding-right: 19px;
        }
      }
      .input-number-left {
        margin-right: 25px;
      }

      .color-radio-group {
        background-color: #eeeeee;
        :deep(.el-radio-button__inner) {
          display: inline-block;
          padding: 2px 1px;
          border: 0;
          border-radius: 0;
          height: 24px;
          margin: 2px 2px;
          background: #eeeeee;
        }
        :deep(.is-active) {
          .el-radio-button__inner {
            background-color: #409eff;
          }
        }
      }

      .colorSquare {
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>

<style lang="less" scoped>
@import './panel-property.less';
</style>
